<template>
    <div>
        售货机编号：<el-input placeholder="请输入内容" v-model="shjbh" clearable style="width: 200px;">

    </el-input>
        消费者名：<el-input placeholder="请输入内容" v-model="xfzname" clearable style="width: 200px;">
    </el-input>
        时间： <el-date-picker
            v-model="time"
            type="date"
            placeholder="选择日期"
            format="yyyy/MM/dd"
            value-format="yyyy/MM/dd">
    </el-date-picker>

        <el-button type="primary" icon="el-icon-search" @click="verification">查询</el-button>
        <div>
            <!--表格-->
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        :index="indexMethod"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="tradeNo"
                        label="订单编号"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop="fundName"
                        label="消费者名"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="fundTime"
                        label="消费时间"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="commName"
                        label="购买的商品"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="fundState"
                        label="订单状态"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="fundMoney"
                        label="订单金额"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="fundNum"
                        label="购买数量"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="vmid"
                        label="售货机编号"
                        width="119">
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page=page
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size=size
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=total>
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'VendingMachine',
        mounted() {//默认第一次加载
            initTable(this)
        },
        data () {
            return {
                pickerOptions: {
                    disabledDate (time) {
                        return time.getTime() > Date.now()
                    }
                },
                time: '',
                tableData: [],
                total: 0,
                page: 1,
                size: 10,
                subForm:{
                    startTime:'',
                    overTime:'',
                },
                value: '',
                shjbh: '',
                xfzname: '',
            }
        },
        methods: {

            //以下是表格部分的方法
            indexMethod(index) {
                return index + 1
            },
            handleSizeChange(val) {
                this.size = val
                initTable(this)
                console.log(`每页 ${val} 条`)
            },
            handleCurrentChange(val) {
                this.page = val
                initTable(this)
                console.log(`当前页: ${val}`)
            },
            verification:function () {
                this.$axios.post("fundcx", {
                    page: this.page,
                    size: this.size,
                    fundName: this.xfzname,
                    fundTime: this.time,
                    vmid: this.shjbh
                }).then(resp => {
                    if (resp) {
                        this.$message({
                            type: 'success',
                            message: '查询成功!'
                        })
                        this.tableData = resp.data.tbFunds
                        this.total = resp.data.count
                    }
                })
            },
        },
    }
    function initTable($this) {
        $this.$axios.post("getfund", {
            page: $this.page,
            size: $this.size
        }).then(resp => {
            if (resp) {
                $this.tableData = resp.data.tbFundList
                $this.total = resp.data.count
            }
        })
    }
</script>

<style scoped>

</style>
